<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>插件</h2>
    <!-- <p>count: {{ count }}</p> -->
    <!-- <my-header></my-header> -->
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    const app = createApp({
      // inject: ["count"],
      mounted() {
        console.log(this.$abc);
        this.$fn();
      }
    });

    // 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码
    // 创建插件
    const myPlugin = {
      install(app, options) {
        // 插件可以注册全局组件或者全局的自定义指令
        // app.component("MyHeader", {
        //   template: `<header>11111</header>`
        // })

        // 可以给全局注入依赖
        // app.provide("count", 123)


        // 还可以给整个项目添加全局的属性和方法
        // 用这种方式添加进去是没有响应式的
        app.config.globalProperties.$abc = "hello vue";
        app.config.globalProperties.$fn = () => {
          console.log("global fn");
        }
      }
    }

    // use用来使用插件
    app.use(myPlugin, {
      /* 可选的选项 */
    })

    app.mount("#app");
  </script>
</body>
</html>